<template>
  <!-- 我的订单 -->
  <view>
    <view class="alldiv">
      <!-- 头部导航 -->
      <view class="headiv">
        <view class="navdiv">
          <u-navbar
            back-text="返回"
            :leftText="language.Orderforgoods.navtitle"
            @leftClick="navigateBack"
          ></u-navbar>
        </view>
        <view class="tabs">
          <u-tabs
            :list="list1"
            lineWidth="40"
            :scrollable="false"
            :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }"
            @click="mytabsclick"
          ></u-tabs>
        </view>
        <view class="subs">
          <u-subsection
            :list="list"
            mode="subsection"
            border="none"
            :current="current"
            @change="sectionChange"
          ></u-subsection>
        </view>
      </view>
      <!-- 大盒子区域 -->
      <view class="bodydiv">
        <!-- 这个是租车订单区域 -->
        <view class="bodydivtwo" v-if="classification == 0">
          <view class="bodiv" v-for="(item, i) in CarRentalist" :key="i">
            <u-cell-group>
              <u-cell size="large">
                <view slot="title">
                  <image
                    :src="item.imageurl"
                    style="width: 11px; height: 11px"
                    mode="scaleToFill"
                  />
                  <span
                    style="
                      font-size: 14px;
                      color: rgba(51, 51, 51, 1);
                      font-weight: bold;
                      margin-left: 5px;
                    "
                    >{{ item.state }}</span
                  >
                </view>
                <view
                  slot="value"
                  style="width: 200px; display: flex; justify-content: flex-end"
                >
                  <view style="display: flex">
                    <u-button
                      v-if="item.state === '进行中'"
                      :text="language.Orderforgoods.zcygm"
                      style="width: 100px"
                      shape="circle"
                    ></u-button>
                    <u-button
                      v-if="item.state === '进行中'"
                      :text="language.Orderforgoods.zchc"
                      style="width: 100px"
                      color="rgba(47,212,184,1)"
                      shape="circle"
                    ></u-button>
                    <u-button
                      v-else-if="item.state == '待支付'"
                      :text="language.Orderforgoods.zcqzf"
                      style="width: 100px"
                      color="rgba(47,212,184,1)"
                      shape="circle"
                    ></u-button>
                  </view>
                </view>
              </u-cell>
              <u-cell size="large">
                <view slot="label" class="labeldiv">
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.zcnum }}</span
                    >
                    <span style="font-size: 10px; color: rgba(51, 51, 51, 1)">{{
                      item.Licenseplatenumber
                    }}</span>
                  </view>
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.zccx }}</span
                    >
                    <span style="font-size: 10px; color: rgba(51, 51, 51, 1)">{{
                      item.model
                    }}</span>
                  </view>
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.zckssj }}</span
                    >
                    <span style="font-size: 10px; color: rgba(51, 51, 51, 1)">{{
                      item.timeon
                    }}</span>
                  </view>
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.zcjssj }}</span
                    >
                    <span style="font-size: 10px; color: rgba(51, 51, 51, 1)">{{
                      item.timeon
                    }}</span>
                  </view>
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.zccsfy }}</span
                    >
                    <span
                      style="
                        font-size: 14px;
                        color: rgba(51, 51, 51, 1);
                        font-weight: bold;
                      "
                      >￥{{ item.cost }}</span
                    >
                  </view>
                </view>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
        <!-- 这个是打车区域 -->
        <view class="bodydivtwo" v-if="classification == 1">
          <view class="bodiv" v-for="(item, i) in takingataxilist" :key="i">
            <u-cell-group>
              <u-cell size="large">
                <view slot="title">
                  <span
                    style="
                      font-size: 14px;
                      color: rgba(51, 51, 51, 1);
                      font-weight: bold;
                    "
                    >{{ item.Licenseplatenumber }}</span
                  >
                  <span
                    style="
                      margin-left: 10px;
                      font-size: 12px;
                      color: rgba(153, 153, 153, 1);
                    "
                    >{{ item.model }}</span
                  >
                </view>
                <view slot="value" style="width: 60px">
                  <image
                    :src="item.imageurl"
                    style="width: 11px; height: 11px"
                    mode="scaleToFill"
                  />
                  <span
                    style="
                      font-size: 12px;
                      color: rgba(153, 153, 153, 1);
                      margin-left: 5px;
                    "
                    >{{ item.state }}</span
                  >
                </view>
              </u-cell>
              <u-cell size="large">
                <view slot="label" class="labeldiv">
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ item.time }}</span
                    >
                  </view>
                  <view class="lu">
                    <u-steps
                      current="0"
                      activeColor="rgba(255, 141, 26, 1)"
                      inactiveColor="rgba(47, 212, 184, 1)"
                      direction="column"
                    >
                      <u-steps-item :title="item.startingpoint"> </u-steps-item>
                      <u-steps-item :title="item.destination"></u-steps-item>
                    </u-steps>
                  </view>
                  <view class="lud">
                    <view class="lu">
                      <span
                        style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                        >{{ language.Orderforgoods.dcyjfy }}</span
                      >
                      <span
                        style="
                          font-size: 14px;
                          color: rgba(51, 51, 51, 1);
                          font-weight: bold;
                        "
                        >￥{{ item.cost }}</span
                      >
                    </view>
                    <view class="lubtop" v-if="item.state === '待支付'">
                      <view><u-icon name="trash" size="20"></u-icon></view>
                      <view style="width: 300px; display: flex">
                        <u-button
                          :text="language.Orderforgoods.yjfc"
                          style="width: 90px !important"
                          shape="circle"
                        ></u-button>
                        <u-button
                          :text="language.Orderforgoods.zlyd"
                          style="width: 90px !important"
                          color="rgba(47,212,184,1)"
                          shape="circle"
                        ></u-button>
                        <u-button
                          :text="language.Orderforgoods.dcqzf"
                          style="width: 90px !important"
                          color="rgba(47,212,184,1)"
                          shape="circle"
                        ></u-button>
                      </view>
                    </view>
                  </view>
                </view>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
        <!-- 这个是顺风车 -->
        <view class="bodydivtwo" v-if="classification == 2">
          <view class="bodiv" v-for="(item, i) in freerideilist" :key="i">
            <u-cell-group>
              <u-cell size="large">
                <view slot="title">
                  <span
                    style="
                      font-size: 14px;
                      color: rgba(51, 51, 51, 1);
                      font-weight: bold;
                    "
                    >{{ item.Licenseplatenumber }}</span
                  >
                  <span
                    style="
                      margin-left: 10px;
                      font-size: 12px;
                      color: rgba(153, 153, 153, 1);
                    "
                    >{{ item.model }}</span
                  >
                </view>
                <view slot="value" style="width: 60px">
                  <image
                    :src="item.imageurl"
                    style="width: 11px; height: 11px"
                    mode="scaleToFill"
                  />
                  <span
                    style="
                      font-size: 12px;
                      color: rgba(153, 153, 153, 1);
                      margin-left: 5px;
                    "
                    >{{ item.state }}</span
                  >
                </view>
              </u-cell>
              <u-cell size="large">
                <view slot="label" class="labeldiv">
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ item.time }}</span
                    >
                  </view>
                  <view class="lu">
                    <u-steps
                      current="0"
                      activeColor="rgba(255, 141, 26, 1)"
                      inactiveColor="rgba(47, 212, 184, 1)"
                      direction="column"
                    >
                      <u-steps-item :title="item.startingpoint"> </u-steps-item>
                      <u-steps-item :title="item.destination"></u-steps-item>
                    </u-steps>
                  </view>
                  <view class="lu">
                    <span
                      style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                      >{{ language.Orderforgoods.sfcyjfy }}</span
                    >
                    <span
                      style="
                        font-size: 14px;
                        color: rgba(51, 51, 51, 1);
                        font-weight: bold;
                      "
                      >￥{{ item.cost }}</span
                    >
                  </view>
                  <view class="lubtop" v-if="item.state === '待支付'">
                    <view><u-icon name="trash" size="20"></u-icon></view>
                    <view style="width: 300px; display: flex">
                      <u-button
                        :text="language.Orderforgoods.sfcfc"
                        style="width: 90px !important"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.sfcyd"
                        style="width: 90px !important"
                        color="rgba(47,212,184,1)"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.sfcqzf"
                        style="width: 90px !important"
                        color="rgba(47,212,184,1)"
                        shape="circle"
                      ></u-button>
                    </view>
                  </view>
                </view>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
        <!-- 这个是商城 -->
        <view class="bodydivtwo" v-if="classification == 3">
          <view class="bodiv" v-for="(item, i) in commoditylist" :key="i">
            <u-cell-group>
              <u-cell size="large">
                <view slot="title">
                  <span style="font-size: 12px; color: rgba(51, 51, 51, 1)">{{
                    item.time
                  }}</span>
                </view>
                <view slot="value" style="width: 60px">
                  <span
                    v-if="item.state == '已完成'"
                    style="
                      font-size: 12px;
                      color: rgba(255, 141, 26, 1);
                      margin-left: 5px;
                    "
                    >{{ item.state }}</span
                  >
                  <span
                    v-else
                    style="
                      font-size: 12px;
                      color: rgba(153, 153, 153, 1);
                      margin-left: 5px;
                    "
                    >{{ item.state }}</span
                  >
                </view>
              </u-cell>
              <u-cell size="large">
                <view slot="label" class="labeldiv">
                  <!-- 图片商品描述区域 -->
                  <view class="lanbdiv">
                    <!-- 描述图片区域 -->
                    <view class="titdiv">
                      <!-- 这个是图片 -->
                      <view class="imagediv">
                        <image
                          :src="item.imageurl"
                          style="width: 64px; height: 69px"
                          mode="scaleToFill"
                        />
                      </view>
                      <!-- 这个是内容 -->
                      <view class="titlepdiv">
                        <view class="spnamediv">
                          <span
                            style="
                              color: rgba(51, 51, 51, 1);
                              font-size: 14px;
                              font-weight: bold;
                            "
                            >{{ item.name }}</span
                          >
                        </view>
                        <view class="msdiv">
                          <span>{{ item.describe }}</span>
                        </view>
                      </view>
                    </view>
                    <!-- 价格数量区域 -->
                    <view class="pricenum">
                      <view>
                        <span
                          style="font-size: 10px; color: rgba(51, 51, 51, 1)"
                          >￥</span
                        >
                        <span
                          style="
                            font-size: 14px;
                            font-weight: bold;
                            color: rgba(51, 51, 51, 1);
                          "
                          >{{ item.cost }}</span
                        ></view
                      >
                      <view>
                        <span
                          style="font-size: 12px; color: rgba(153, 153, 153, 1)"
                          >{{ item.num }}</span
                        >
                      </view>
                    </view>
                  </view>
                  <!-- 实付款区域 -->
                  <view class="sfknum">
                    <view class="sfk">
                      <span
                        style="font-size: 10px; color: rgba(153, 153, 153, 1)"
                        >{{ language.Orderforgoods.scsfk }}：</span
                      >
                      <span
                        ><span
                          style="font-size: 10px; color: rgba(51, 51, 51, 1)"
                          >￥</span
                        >
                        <span
                          style="
                            font-size: 14px;
                            color: rgba(51, 51, 51, 1);
                            font-weight: bold;
                          "
                          >{{ item.cost }}</span
                        ></span
                      >
                    </view>
                  </view>
                  <!-- 这个是按钮区域 -->
                  <view
                    class="lubtop"
                    style="display: flex; justify-content: flex-end"
                  >
                    <view style="width: 200px; display: flex">
                      <u-button
                        :text="language.Orderforgoods.scqxdd"
                        v-if="item.state == '待付款'"
                        style="width: 90px !important"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.scljfk"
                        v-if="item.state == '待付款'"
                        style="width: 90px !important"
                        color="rgba(47,212,184,1)"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.scckwl"
                        v-if="item.state == '待收货'"
                        style="width: 90px !important"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.scqrsh"
                        v-if="item.state == '待收货'"
                        style="width: 90px !important"
                        color="rgba(47,212,184,1)"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.scjrgwc"
                        v-if="item.state == '已完成'"
                        style="width: 90px !important"
                        shape="circle"
                      ></u-button>
                      <u-button
                        :text="language.Orderforgoods.sczmyd"
                        v-if="item.state == '已完成'"
                        style="width: 90px !important"
                        color="rgba(47,212,184,1)"
                        shape="circle"
                      ></u-button>
                    </view>
                  </view>
                </view>
              </u-cell>
            </u-cell-group>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      language: {},
      // 分类导航
      classification: 0,
      list1: [],
      list: [],
      current: 0,
      //   租车list
      CarRentalist: [
        {
          state: "进行中",
          imageurl:
            "https://img1.baidu.com/it/u=943185075,2995605506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          Licenseplatenumber: "122334556",
          timeon: "2023-10-26",
          EndTime: "2023-10-26",
          model: "|||",
          cost: 22,
        },
        {
          state: "待支付",
          imageurl:
            "https://images.669pic.com/element_pic/38/51/64/95/c700a908cad51bdf31f121c727d8948d.jpg",
          Licenseplatenumber: "122334556",
          timeon: "2023-10-26",
          EndTime: "2023-10-26",
          model: "|||",
          cost: 22,
        },
        {
          state: "已完成",
          imageurl:
            "https://pic.616pic.com/ys_bnew_img/00/06/99/iqcjkGJEHX.jpg",
          Licenseplatenumber: "122334556",
          timeon: "2023-10-26",
          EndTime: "2023-10-26",
          model: "|||",
          cost: 22,
        },
        {
          state: "已取消",
          imageurl: "https://pic.616pic.com/ys_img/00/95/63/ZopdOFxNJF.jpg",
          Licenseplatenumber: "122334556",
          timeon: "2023-10-26",
          EndTime: "2023-10-26",
          model: "|||",
          cost: 22,
        },
      ],
      //   打车list
      takingataxilist: [
        {
          state: "进行中",
          imageurl:
            "https://img1.baidu.com/it/u=943185075,2995605506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "广汽新能源",
          cost: 22,
        },
        {
          state: "待支付",
          imageurl:
            "https://images.669pic.com/element_pic/38/51/64/95/c700a908cad51bdf31f121c727d8948d.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "广汽新能源",
          cost: 22,
        },
        {
          state: "已完成",
          imageurl:
            "https://pic.616pic.com/ys_bnew_img/00/06/99/iqcjkGJEHX.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "广汽新能源",
          cost: 22,
        },
        {
          state: "已取消",
          imageurl: "https://pic.616pic.com/ys_img/00/95/63/ZopdOFxNJF.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "广汽新能源",
          cost: 22,
        },
      ],
      //   顺风车list
      freerideilist: [
        {
          state: "进行中",
          imageurl:
            "https://img1.baidu.com/it/u=943185075,2995605506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "1人·拼座·未拼成",
          cost: 22,
        },
        {
          state: "待支付",
          imageurl:
            "https://images.669pic.com/element_pic/38/51/64/95/c700a908cad51bdf31f121c727d8948d.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "1人·拼座·未拼成",
          cost: 22,
        },
        {
          state: "已完成",
          imageurl:
            "https://pic.616pic.com/ys_bnew_img/00/06/99/iqcjkGJEHX.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "1人·拼座·未拼成",
          cost: 22,
        },
        {
          state: "已取消",
          imageurl: "https://pic.616pic.com/ys_img/00/95/63/ZopdOFxNJF.jpg",
          Licenseplatenumber: "粤A·123456",
          time: "2023-10-26",
          startingpoint:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          destination:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          model: "1人·拼座·未拼成",
          cost: 22,
        },
      ],
      //   商品list
      commoditylist: [
        {
          state: "待付款",
          imageurl:
            "https://img1.baidu.com/it/u=943185075,2995605506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          name: "电动电池",
          time: "2023-10-26",
          describe:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          cost: 22,
          num: "x20",
        },
        {
          state: "待收货",
          imageurl:
            "https://images.669pic.com/element_pic/38/51/64/95/c700a908cad51bdf31f121c727d8948d.jpg",
          name: "电动电池",
          time: "2023-10-26",
          describe:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          cost: 22,
          num: "x20",
        },
        {
          state: "已完成",
          imageurl:
            "https://pic.616pic.com/ys_bnew_img/00/06/99/iqcjkGJEHX.jpg",
          name: "电动电池",
          time: "2023-10-26",
          describe:
            "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          cost: 22,
          num: "x20",
        },
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
      this.list1 = this.language.Orderforgoods.lists;
      this.list = this.language.Orderforgoods.listsd;
    },
    sectionChange(index) {
      this.current = index;
    },
    // 这个是点击分类时的数据
    mytabsclick(item) {
      console.log("item", item);
      this.classification = item.index;
    },
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  // 头部导航栏样式
  .headiv {
    width: 100%;
    height: 30%;
    overflow: hidden;
    .navdiv {
      width: 100%;
      height: 10%;
      overflow: hidden;
      margin-bottom: 10%;
    }
    .tabs {
      width: 100%;
      height: 25%;
      background-color: #ffff;
      padding-top: 5%;
    }
    .subs {
      width: 100%;
      height: 15%;
      margin-top: 5px;
    }
  }
  //   主体区域样式
  .bodydiv {
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bodydivtwo {
      width: 90%;
      height: 100%;
      margin: auto;
      overflow: auto;
      // 订单列表样式
      .bodiv {
        width: 100%;
        height: auto;
        background-color: #ffff;
        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
        overflow: hidden;
        // 这个是租车信息区域样式
        .labeldiv {
          width: 100%;
          height: auto;
          .lu {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: space-between;
          }
          .lubtop {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          //   这个是图片商品描述区域样式
          .lanbdiv {
            width: 100%;
            height: auto;
            display: flex;
            .titdiv {
              width: 100%;
              height: 100%;
              display: flex;
              .imagediv {
                width: 20%;
                height: 100%;
                overflow: hidden;
              }
              .titlepdiv {
                width: 80%;
                height: 100%;
                // 商品名称区域样式
                .spnamediv {
                  width: 100%;
                  height: 50%;
                }
                .msdiv {
                  width: 100%;
                  height: 50%;
                  word-wrap: break-word;
                  word-break: break-all;
                  overflow: hidden;
                  font-size: 14px;
                  text-overflow: -o-ellipsis-lastline;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
                }
              }
            }

            .pricenum {
              width: 20%;
              height: 100%;
              display: flex;
              align-items: center;
              flex-direction: column;
            }
          }
          //这个是实付款区域样式
          .sfknum {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
  }
}
/deep/.u-tabs__wrapper__nav__line {
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(65, 240, 135, 1) 0%,
    rgba(47, 212, 184, 1) 100%
  ) !important;
  width: 25px !important;
  position: absolute;
  bottom: 2px;
  border-radius: 100px;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 300ms;
}
/deep/ .u-subsection__item.u-subsection__item--2.u-subsection__item--last {
  border: none !important;
}
/deep/ .u-subsection__item--last {
  border: none !important;
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  border: none !important;
}

/deep/ .u-subsection__bar--center {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--last {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--first {
  background: rgba(47, 212, 184, 1) !important;
  border-radius: 8px !important;
}
/deep/ .u-text__value--main {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  width: 90%;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/deep/ .u-text__value--content {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  width: 90%;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
